<!DOCTYPE HTML>
<html>

<head>
   <title> 商品档案列表</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <div class="container">
      <div class="detail-page">
         <div class="detail-page-title">
            <h4>商品列表
               <button type="button" id="add-new-btn" class="pull-right jx-btn btn-default">新增商品</button>
            </h4>
         </div>
         <div class="jx-search-container">
            <form id="searchForm" class="jx-form form-horizontal jx-form-thin" method="post">
               <div class="row">
                  <div class="control-group span7">
                     <label class="control-label">商品货号：</label>
                     <div class="controls">
                        <input type="text" class="control-text" name="code" id="goodsCode">
                     </div>
                  </div>
                  <div class="control-group span7">
                     <label class="control-label">状态：</label>
                     <div class="controls">
                        <select id="goodsStatus" name="">
                                <option value="">全部</option>
                                <option value="1">上架</option>
                                <option value="0">下架</option>
                            </select>
                     </div>
                  </div>
                  <div class="control-group span7">
                     <label class="control-label">库存状态：</label>
                     <div class="controls">
                        <select id="goodsStatus" name="">
                                <option value="">全部</option>
                                <option value="1">有货</option>
                                <option value="0">售罄</option>
                            </select>
                     </div>
                  </div>

                  <div class="span2 pull-right">
                     <button type="submit" id="btnSearch" class="jx-btn btn-default">搜索</button>

                  </div>
               </div>


               <div class="row">
                  <div class="control-group span7">
                     <label class="control-label">商户：</label>
                     <div class="controls">
                        <input type="text" class="control-text" name="code" id="goodsCode">
                     </div>
                  </div>
                  <div class="control-group span7">
                     <label class="control-label">是否绑定帖子：</label>
                     <div class="controls">
                        <select id="goodsStatus" name="">
                                <option value="">全部</option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                     </div>
                  </div>
                  <div class="control-group span11">
                     <label class="control-label">修改时间 ：</label>
                     <div class="controls">
                        <input class="calendar calendar-time" type="text" name="startTime" id="startTime"><span> &nbsp;-&nbsp; </span>
                        <input class="calendar calendar-time" type="text" name="endTime" id="endTime">
                     </div>
                  </div>

               </div>

            </form>
         </div>

         <div class="search-grid-container">
            <div id="grid"></div>
         </div>
      </div>
   </div>
   <!-- 初始隐藏 dialog内容    -->
   <div id="content" class="hide">
      <form id="form" class="jx-form form-horizontal jx-form-thin">
         <div class="row">
            <div class="control-group span10">
               <label class="control-label">商品名称:</label>
               <div class="controls">
                  DIADORA/迪亚多纳 女子小童跑步鞋 17036350160
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span10">
               <label class="control-label">商品编码:</label>
               <div class="controls">
                  17036350160
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group">
               <label for="" class="control-label">&nbsp; </label>
               <div class="controls">
                  <table id="size-table" class="jx-table  table-bordered  center">
                     <thead>
                        <tr>
                           <td> 规格/尺码</td>
                           <td> 规格别名</td>
                           <td> 规格编码/条形码</td>
                           <td> 库存</td>
                        </tr>
                     </thead>
                     <tbody>
                        <tr>
                           <td> <input class="input-medium" type="text"></td>
                           <td> <input class="input-medium" type="text"></td>
                           <td> <input class="input-medium" type="text"></td>
                           <td> <input class="input-medium" type="text"></td>

                        </tr>
                     </tbody>

                  </table>
               </div>
            </div>
         </div>
      </form>
   </div>



   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script type="text/javascript">
      $("#add-new-btn").click(function () {
         top.topManager.openPage({
            id: 'add-new-btn',
            href: 'templates/product/product-list/product-add-info.html',
            title: '添加商品信息'
         });
      });
      BUI.use(['bui/grid', 'bui/data', 'common/search'], function (Grid, Data, Search) {
         var Grid = Grid,
            Store = Data.Store,
            columns = [{
               title: '商品信息',
               dataIndex: 'a',
               elCls: 'td-pro',
               width: 250,
               renderer: function (value, obj) {
                  return '<div class="td-inner">' +
                     '  <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                     '  <div class="pro-info  ml-10">' +
                     '      <p>DIADORA/迪亚多纳 女子小童跑步鞋 17036350160</p>' +
                     '      <p class="jx-text-error">销售价： ¥49.00</p>' +
                     '  </div>' +
                     '</div>'
               }
            }, {
               title: '返佣金额',
               dataIndex: 'b',
               width: 150,
               renderer: function (value, obj) {
                  return '<div>' +
                     '           <p>返佣金额：￥49.00</p>' +
                     '           <p>比例：20%</p>' +
                     '      </div>';
               }

            }, {
               title: '库存',
               elCls: 'center',
               dataIndex: 'c',
               width: 50
            }, {
               title: '创建时间',
               elCls: 'center',
               dataIndex: 'd',
               width: 150
            }, {
               title: '状态',
               elCls: 'center',
               dataIndex: 'e',
               width: 100,
               renderer: function (value, obj) {
                  return '<div>' +
                     '           <p>上架</p>' +
                     '           <p class="jx-text-error">帖子商品</p>' +
                     '      </div>';
               }
            }, {
               title: '商户',
               elCls: 'center',
               dataIndex: 'f',
               width: 200
            }, {
               title: '操作',
               elCls: 'center',
               dataIndex: 'p',
               width: 250,
               renderer: function (value, obj) {
                  var editStr = Search.createLink({ //链接使用 此方式
                        id: 'edit' + obj.id,
                        title: '编辑商品信息',
                        text: '[ 编辑 ] ',
                        href: 'templates/product/product-list/product-add-info.html'
                     }),
                     showStr = Search.createLink({ //链接使用 此方式
                        id: 'edit' + obj.id,
                        title: '预览',
                        text: '[ 预览 ] ',
                        href: 'templates/product/product-list/product-add-info.html'
                     }),
                     stockStr = '<span class="grid-command stock-btn">[ 查看库存 ]</span>', //页面操作不需要使用Search.createLink
                     offStr = '<span class="grid-command off-sale-btn">[ 下架 ]</span>'; //页面操作不需要使用Search.createLink

                  return showStr + editStr + offStr + stockStr;
               }
            }],
            data = [{
               id: 1,
               a: '商品信息',
               b: '返佣金额',
               c: '4',
               d: '2018-04-03 11:45:01',
               e: '状态',
               f: '激想体育特卖号',
            }];

         //初始化数据
         var store = new Store({ //初始化数据
               data: data,
               autoLoad: true, //自动加载数据
               pageSize: 2 // 配置分页数目
            }),
            editing = new Grid.Plugins.DialogEditing({
               contentId: 'content', //设置隐藏的Dialog内容
               triggerCls: 'stock-btn', //触发显示Dialog的样式
               editor: {
                  title: '编辑库存',
                  width: 600,
               }
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'small-bui-grid-table',
               columns: columns,
               forceFit: true,
               loadMask: true, //加载数据时显示屏蔽层

               tbar: { //添加、删除
                  elCls: 'pull-right',
                  items: [{
                     btnCls: 'button button-small',
                     text: '批量上架',
                     listeners: {
                        'click': onSaleFunction
                     }
                  }, {
                     btnCls: 'button button-small',
                     text: '批量下架',
                     listeners: {
                        'click': offSaleFunction
                     }
                  }]
               },
               // 底部工具栏
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               plugins: [editing, Grid.Plugins.AutoFit, Grid.Plugins.CheckSelection], //插件
               store: store
            });

         grid.render();


         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;

            if (sender.hasClass('btn-off-sale')) { //点击下架操作
               offSaleFunction(item, itemEl);

            }
         });

         //上架选中的记录
         function onSaleFunction(item, itemEl) {
            BUI.Message.Confirm('确认上架？', function () {

            }, 'question');
         }
         //批量
         function offSaleFunction() {

         }




      });
   </script>
   <!-- script end -->

   <body>

</html>